<template>
  <div class="info">
    <el-tabs tabPosition="left" style="min-height: 600px">
      <el-tab-pane label="我的主页" :lazy="true">
        <iInfo />
      </el-tab-pane>
      <el-tab-pane label="修改密码" :lazy="true">
        <iPassword />
      </el-tab-pane>
      <el-tab-pane label="借阅记录" :lazy="true">
        <iBorrow />
      </el-tab-pane>
      <el-tab-pane label="订单记录" :lazy="true">
        <iOrder />
      </el-tab-pane>
      <!-- <el-tab-pane label="我的发帖" :lazy="true">
        <iPost />
      </el-tab-pane> -->
      <el-tab-pane label="报修记录" :lazy="true">
        <iErrata />
      </el-tab-pane>
      <el-tab-pane label="积分排行榜" :lazy="true">
        <iPoint />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import iInfo from "./iInfo";
import iPassword from "./iPassword";
import iBorrow from "./iBorrow";
import iErrata from "./iErrata";
import iOrder from "./iOrder";
import iPoint from "./iPoint";
// import iPost from './iPost';
export default {
  components: {
    iInfo,
    iPassword,
    iBorrow,
    iErrata,
    // iPost
    iOrder,
    iPoint,
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tabs__header.is-left {
  min-height: 600px;

  .el-tabs__nav-scroll {
    height: 600px;
  }
}

/deep/.el-tabs--border-card > .el-tabs__header {
  .el-tabs__item {
    &.is-active {
      color: #eba613;
    }

    &:not(.is-disabled):hover {
      color: #eba613;
    }
  }

  // .el-tabs__item:not(.is-disabled):hover {
  //   color: #eba613;
  // }
}

.info {
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
}
</style>
